<template>
  <div class="quxunqiloufang-container">
    <div class="left-panel">
      <div class="year-panel">
        <h3 class="panel-title">管理年度</h3>
        <div class="year-list">
          <div v-for="year in yearList" :key="year.value" :class="[
              'year-item',
              { active: selectedYear.value === year.value },
            ]" @click="handleYearChange(year)">
            <span class="year-text">{{ year.label }}</span>
            <span class="year-count">({{ year.count || 0 }})</span>
          </div>
        </div>
      </div>
    </div>
    <div class="right-panel">
      <div class="page-content">
        <div class="header-section">
          <div class="form-row">
            <!-- <div class="form-item">
              <label>填报单位：</label>
              <div class="input-wrapper">
                <DeptBrowser v-model="listQuery.houseAdminId" />
              </div>
            </div> -->

            <div class="form-item">
              <label>日期：</label>
              <el-date-picker v-model="listQuery.value" type="daterange" range-separator="至" start-placeholder="开始日期"
                end-placeholder="结束日期">
              </el-date-picker>
            </div>

            <div class="form-item">
              <el-button type="primary" @click="handleSearch">查询</el-button>
              <el-button @click="handleReset">重置</el-button>
            </div>
          </div>
        </div>

        <!-- 操作按钮区域 -->
        <div class="operation-section">
          <el-button type="primary" @click="handleAdd" class="add-btn">上报</el-button>
          <el-button type="primary" @click="handeDaochu" class="add-btn">导出</el-button>
        </div>

        <!-- 数据表格 -->
        <div class="table-section">
          <table class="data-table">
            <thead>
              <tr>
                <th rowspan="2" class="center-cell">
                  <input type="checkbox" />
                </th>
                <th rowspan="2" class="center-cell">序号</th>
                <th rowspan="2" class="center-cell">填报单位</th>
                <th rowspan="2" class="center-cell">统计日期</th>

                <th colspan="3" class="center-cell">漏房及维修统计（处）</th>
                <th colspan="3" class="center-cell">应急抢险排险（处）</th>
                <th rowspan="2" class="center-cell">
                  抢修情况（具体部位、难度情况）
                </th>
                <th rowspan="2" class="center-cell">操作</th>
              </tr>
              <tr>
                <th class="center-cell">本次漏房数</th>
                <th class="center-cell">已维修数</th>
                <th class="center-cell">上次雨后漏房维修数</th>
                <th class="center-cell">排险数</th>
                <th class="center-cell">排险车次</th>
                <th class="center-cell">排险人次</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item, index) in tableData" :key="item.id">
                <td class="center-cell">
                  <input type="checkbox" />
                </td>
                <td class="center-cell">{{ index + 1 }}</td>
                <td class="center-cell">{{ item.districtName }}</td>
                <td class="center-cell">{{ item.statisticsDate }}</td>
                <td class="center-cell">{{ item.count1 }}</td>
                <td class="center-cell">{{ item.count2 }}</td>
                <td class="center-cell">{{ item.count3 }}</td>
                <td class="center-cell">{{ item.count4 }}</td>
                <td class="center-cell">{{ item.count5 }}</td>
                <td class="center-cell">{{ item.count6 }}</td>
                <td class="center-cell">{{ item.descContent }}</td>
                <td class="operation-column">
                  <button @click="handleView(item)" class="operation-btn view-btn">
                    详情
                  </button>
                  <button @click="handleEdit(item)" class="operation-btn edit-btn">
                    修改
                  </button>
                  <!-- <button @click="handleDelete(item)" class="operation-btn delete-btn">删除</button> -->
                </td>
              </tr>
              <tr v-if="tableData.length === 0">
                <td colspan="11" class="no-data">暂无数据</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>

      <!-- 分页 -->
      <div class="publicpaginationview">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="listQuery.pageNum" background :page-sizes="[10, 20, 50, 100]" :page-size="listQuery.pageSize"
          layout="total, sizes, prev, pager, next, jumper" :total="total" small>
        </el-pagination>
      </div>
    </div>

    <!-- 上报/编辑弹窗 -->
    <div v-if="showDialog" class="dialog-overlay" @click="handleCloseDialog">
      <div class="dialog-content detail-dialog" @click.stop>
        <div class="dialog-header">
          <h3>{{ dialogTitle }}</h3>
          <button @click="handleCloseDialog" class="close-btn">×</button>
        </div>
        <div class="dialog-body">
          <div class="form-section">
            <div class="form-title">区直管公房汛期漏房、排险统计表</div>


            <!-- 明细表格 -->
            <div class="detail-table-section">
              <div class="detail-table-header">
                <span class="detail-table-title">明细信息</span>
                <!-- <button @click="addDetailRow" class="add-detail-btn">
                  添加明细
                </button> -->
              </div>

              <div class="detail-table-wrapper">
                <table class="detail-table">
                  <thead>
                    <tr>
                      <th rowspan="2" class="center-cell">序号</th>
                      <th rowspan="2" class="center-cell">单位</th>
                      <th rowspan="2" class="center-cell">日期</th>
                      <th colspan="3" class="center-cell">
                        漏房及维修统计（处）
                      </th>
                      <th colspan="3" class="center-cell">
                        应急抢险排险（处）
                      </th>
                      <th rowspan="2" class="center-cell">
                        抢修情况（具体部位、难度情况）
                      </th>
                      <th rowspan="2" class="center-cell" style="width: 40px">
                        操作
                      </th>
                    </tr>
                    <tr>
                      <th class="center-cell">本次漏房数</th>
                      <th class="center-cell">已维修数</th>
                      <th class="center-cell">上次雨后漏房维修数</th>
                      <th class="center-cell">排险数</th>
                      <th class="center-cell">排险车次</th>
                      <th class="center-cell">排险人次</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr v-for="(item, index) in formData.detailList" :key="index">
                      <td class="center-cell">{{ index + 1 }}</td>
                      <td class="center-cell">
                        <!-- <DeptBrowser v-model="item.houseAdminId" /> -->
                        <!-- <input type="date" v-model="item.districtName" class="table-input" /> -->
                        {{item.districtName}}
                      </td>
                      <td class="center-cell">
                        <input type="date" v-model="item.statisticsDate" class="table-input" />
                      </td>
                      <td class="center-cell">
                        <input type="number" v-model="item.count1" class="table-input-number" placeholder="0" />
                      </td>
                      <td class="center-cell">
                        <input type="number" v-model="item.count2" class="table-input-number" placeholder="0" />
                      </td>
                      <td class="center-cell">
                        <input type="number" v-model="item.count3" class="table-input-number" placeholder="0" />
                      </td>
                      <td class="center-cell">
                        <input type="number" v-model="item.count4" class="table-input-number" placeholder="0" />
                      </td>
                      <td class="center-cell">
                        <input type="number" v-model="item.count5" class="table-input-number" placeholder="0" />
                      </td>
                      <td class="center-cell">
                        <input type="number" v-model="item.count6" class="table-input-number" placeholder="0" />
                      </td>
                      <td class="center-cell">
                        <input v-model="item.descContent" class="table-input" placeholder="请输入抢修情况" />
                      </td>
                      <!-- <td class="center-cell">
                        <button @click="removeDetailRow(index)" class="remove-btn">
                          删除
                        </button>
                      </td> -->
                    </tr>
                    <tr v-if="formData.detailList.length === 0">
                      <td colspan="10" class="no-data">
                        暂无明细数据，请点击"添加明细"按钮添加
                      </td>
                    </tr>
                    <!-- 合计行 -->
                    <tr v-if="formData.detailList.length > 0" class="total-row">
                      <td class="center-cell">合计</td>
                      <td class="center-cell"></td>
                      <td class="center-cell"></td>
                      <td class="center-cell">
                        {{ getDetailTotal("count1") }}
                      </td>
                      <td class="center-cell">
                        {{ getDetailTotal("count2") }}
                      </td>
                      <td class="center-cell">
                        {{ getDetailTotal("count3") }}
                      </td>
                      <td class="center-cell">
                        {{ getDetailTotal("count4") }}
                      </td>
                      <td class="center-cell">
                        {{ getDetailTotal("count5") }}
                      </td>
                      <td class="center-cell">
                        {{ getDetailTotal("count6") }}
                      </td>
                      <td class="center-cell">
                        {{
                        getDetailTotal("count1") +
                        getDetailTotal("count2") +
                        getDetailTotal("count3") +
                        getDetailTotal("count4") +
                        getDetailTotal("count5") +
                        getDetailTotal("count6")
                        }}
                      </td>
                      <td class="center-cell"></td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
        <div class="dialog-footer">
          <button @click="handleCloseDialog" class="cancel-btn">取消</button>
          <button @click="handleSave" class="save-btn">保存</button>
        </div>
      </div>
    </div>

    <!-- 详情弹窗 -->
    <div v-if="showDetailDialog" class="dialog-overlay" @click="handleCloseDetailDialog">
      <div class="dialog-content detail-dialog" @click.stop>
        <div class="dialog-header">
          <h3>详情信息</h3>
          <button @click="handleCloseDetailDialog" class="close-btn">×</button>
        </div>
        <div class="dialog-body">
          <div class="form-section">
            <div class="form-title">区直管公房汛期漏房、排险统计表</div>

            <!-- 主表信息 -->
            <!-- <div class="form-header-info">
              <div class="form-row">
                <div class="form-item">
                  <label>填报单位：</label>
                  <span class="readonly-text">{{ detailData.reportUnit }}</span>
                </div>
                <div class="form-item">
                  <label>统计日期：</label>
                  <span class="readonly-text">{{ detailData.statisticsDate }}</span>
                </div>
              </div>
            </div> -->

            <!-- 明细表格 -->
            <div class="detail-table-section">
              <div class="detail-table-header">
                <span class="detail-table-title">明细信息</span>
              </div>

              <div class="detail-table-wrapper">
                <table class="detail-table">
                  <thead>
                    <tr>
                      <th rowspan="2" class="center-cell">序号</th>
                      <th rowspan="2" class="center-cell">单位</th>
                      <th rowspan="2" class="center-cell">日期</th>
                      <th colspan="3" class="center-cell">
                        漏房及维修统计（处）
                      </th>
                      <th colspan="3" class="center-cell">
                        应急抢险排险（处）
                      </th>
                      <th rowspan="2" class="center-cell">
                        抢修情况（具体部位、难度情况）
                      </th>
                    </tr>
                    <tr>
                      <th class="center-cell">本次漏房数</th>
                      <th class="center-cell">已维修数</th>
                      <th class="center-cell">上次雨后漏房维修数</th>
                      <th class="center-cell">排险数</th>
                      <th class="center-cell">排险车次</th>
                      <th class="center-cell">排险人次</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr v-for="(item, index) in detailData.detailList" :key="index">
                      <td class="center-cell">{{ index + 1 }}</td>
                      <td class="center-cell">{{ item.districtName }}</td>

                      <td class="center-cell">{{ item.statisticsDate }}</td>
                      <td class="center-cell">{{ item.count1 }}</td>
                      <td class="center-cell">{{ item.count2 }}</td>
                      <td class="center-cell">{{ item.count3 }}</td>
                      <td class="center-cell">{{ item.count4 }}</td>
                      <td class="center-cell">{{ item.count5 }}</td>
                      <td class="center-cell">{{ item.count6 }}</td>
                      <td class="center-cell">{{ item.descContent }}</td>
                    </tr>
                    <tr v-if="
                        !detailData.detailList ||
                        detailData.detailList.length === 0
                      ">
                      <td colspan="9" class="no-data">暂无明细数据</td>
                    </tr>
                    <!-- 合计行 -->
                    <tr v-if="
                        detailData.detailList &&
                        detailData.detailList.length > 0
                      " class="total-row">
                      <td class="center-cell">合计</td>
                      <td class="center-cell"></td>
                      <td class="center-cell"></td>
                      <td class="center-cell">
                        {{ getDetailDisplayTotal("count1") }}
                      </td>
                      <td class="center-cell">
                        {{ getDetailDisplayTotal("count2") }}
                      </td>
                      <td class="center-cell">
                        {{ getDetailDisplayTotal("count3") }}
                      </td>
                      <td class="center-cell">
                        {{ getDetailDisplayTotal("count4") }}
                      </td>
                      <td class="center-cell">
                        {{ getDetailDisplayTotal("count5") }}
                      </td>
                      <td class="center-cell">
                        {{ getDetailDisplayTotal("count6") }}
                      </td>
                      <td class="center-cell"></td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
        <div class="dialog-footer">
          <button @click="handleCloseDetailDialog" class="cancel-btn">
            关闭
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  statisticsYearList,
  detailCheckStatisticsHouse,
  createCheckStatistics,
  detailListStatisticsHouse,
} from "@/api/safe/index";

import { info } from '@/api'
import moment from "moment";
import DeptBrowser from "@/components/SysBrowser/DeptBrowser.vue";
import * as XLSX from 'xlsx'
export default {
  name: "QuXunqiLoufangPaixianShangbao",
  components: { DeptBrowser },
  data() {
    return {
      selectedYear: new Date().getFullYear().toString(),
      yearList: [],
      // 搜索表单
      // 表格数据
      tableData: [],

      // 分页数据
      listQuery: {
        pageNum: 1,
        pageSize: 10,
        year: "",
        // houseAdminId: "",
        value: null,
      },
      total: 1,

      // 弹窗控制
      showDialog: false,
      showDetailDialog: false,
      dialogMode: "add", // add, edit

      // 表单数据
      formData: {
        id: null,
        reportUnit: "",
        statisticsDate: "",
        detailList: [], // 明细列表
      },

      // 详情数据
      detailData: {},
    };
  },

  computed: {
    // 弹窗标题
    dialogTitle() {
      return this.dialogMode === "add" ? "新建上报" : "修改上报";
    },
  },

  mounted() {
    this.loadData();

  },

  methods: {


    handeDaochu() {
      let outList = []
      this.tableData.forEach((item, index) => {
        outList.push({
          填报单位: item.districtName,
          统计日期: item.statisticsDate,
          本次漏房数: item.count1,
          已维修数: item.count2,
          上次雨后漏房维修数: item.count3,
          排险数: item.count4,
          排险车次: item.count5,
          排险人次: item.count6,
          '抢修情况（具体部位、难度情况）': item.descContent
        })
      })

      // 获取表格数据
      const data = outList
      // 转换数据为工作表
      const worksheet = XLSX.utils.json_to_sheet(data)
      // 创建新的工作簿
      const workbook = XLSX.utils.book_new()
      // 将工作表添加到工作簿
      XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1')
      // 导出Excel文件
      XLSX.writeFile(workbook, '（区）汛期漏房及排查情况统计.xlsx')
    },
    handleYearChange(year) {
      this.selectedYear = year;
      this.listQuery.year = year.value;
      this.listQuery.pageNum = 1;
      this.handleSearch();
      this.$message.success(`切换到${year.value}年数据`);
    },

    // 获取年度列表
    getYearList() {
      statisticsYearList()
        .then((response) => {
          if (response.code === 200) {
            this.yearList =
              response.data.map((item) => ({
                value: item.years,
                label: item.years + "年",
                count: item.count,
              })) || [];
            // 如果当前选中的年度不在列表中，选择第一个年度
            if (this.yearList.length > 0) {
              this.selectedYear = this.yearList[0];
              this.listQuery.year = this.selectedYear.value;
              this.handleSearch();
            }
          } else {
            this.$message.error(response.message || "获取年度列表失败");
          }
        })
        .catch((error) => {
          console.error("获取年度列表失败:", error);
          this.$message.error("获取年度列表失败");
        });
    },
    // 加载数据
    loadData() {
      // 这里将来对接API
      this.getYearList();
    },

    // 搜索
    handleSearch() {
      let startDate = null;
      let endDate = null;
      if (this.listQuery.value != null) {
        startDate = moment(this.listQuery.value[0]).format("YYYY-MM-DD");
        endDate = moment(this.listQuery.value[1]).format("YYYY-MM-DD");
      }
      const { pageNum, pageSize, year, houseAdminId } = this.listQuery;
      detailCheckStatisticsHouse({
        year,
        pageNum,
        pageSize,
        startDate,
        endDate,
        houseAdminId,
      }).then((res) => {
        this.tableData = res.data.list;
        this.total = res.data.total;
      });
    },

    // 重置
    handleReset() {
      this.listQuery = {
        year: "",
        houseAdminId: "",
        value: null,
      };
      this.handleSearch();
    },

    // 新增
    handleAdd() {
      this.dialogMode = "add";
      this.formData = {
        id: null,
        detailList: [],
      };
      // 默认添加一行明细
      this.addDetailRow();
      this.showDialog = true;
    },

    // 编辑
    handleEdit(item) {
      detailListStatisticsHouse({
        // houseAdminId: item.houseAdminId,
        // statisticsDate: item.statisticsDate,
        id: item.id
      }).then((res) => {
        this.dialogMode = "edit";
        this.formData = {
          detailList: [...res.data],
        };

        this.showDialog = true;
      });
    },

    // 查看详情
    handleView(item) {
      detailListStatisticsHouse({
        houseAdminId: item.houseAdminId,
        statisticsDate: item.statisticsDate,
        id: item.id
      }).then((res) => {
        this.detailData = {
          detailList: [...res.data],
        };
        this.showDetailDialog = true;
      });
    },

    // 删除
    handleDelete(item) {
      if (confirm("确认删除这条记录吗？")) {
        console.log("删除:", item);
        // 这里将来对接API
        // 临时删除逻辑
        const index = this.tableData.findIndex((data) => data.id === item.id);
        if (index > -1) {
          this.tableData.splice(index, 1);
          this.total = this.tableData.length;
        }
      }
    },

    // 保存
    handleSave() {
      // 验证主表信息
      // if (!this.formData.reportUnit) {
      //   alert('请输入填报单位');
      //   return;
      // }

      // if (!this.formData.statisticsDate) {
      //   alert('请选择统计日期');
      //   return;
      // }

      // 验证明细数据
      if (!this.formData.detailList || this.formData.detailList.length === 0) {
        alert("请至少添加一条明细数据");
        return;
      }

      // 验证明细数据完整性
      // for (let i = 0; i < this.formData.detailList.length; i++) {
      //   const detail = this.formData.detailList[i];
      //   if (!detail.date) {
      //     alert(`第${i + 1}行明细的日期不能为空`);
      //     return;
      //   }
      // }

      // 这里将来对接API
      // 临时保存逻辑 - 保存主子表数据
      if (this.dialogMode === "add") {
        createCheckStatistics(this.formData.detailList).then((res) => {
          this.$message.success("操作成功");
          this.handleSearch();
          this.formData.detailList = [];
          this.formData.id = null;
        });
      } else {
        // 编辑模式 - 更新现有记录
        console.log(this.formData.detailList);
        createCheckStatistics(this.formData.detailList).then((res) => {
          this.$message.success("操作成功");
          this.handleSearch();
          this.formData.detailList = [];
          this.formData.id = null;
        });
      }

      this.total = this.tableData.length;
      this.handleCloseDialog();
    },

    // 关闭弹窗
    handleCloseDialog() {
      this.showDialog = false;
    },

    // 关闭详情弹窗
    handleCloseDetailDialog() {
      this.showDetailDialog = false;
    },

    // 分页大小改变
    handleSizeChange(val) {
      this.listQuery.pageNum = 1;
      this.listQuery.pageSize = val;
      this.handleSearch();
    },

    // 当前页改变
    handleCurrentChange(val) {
      this.listQuery.pageNum = val;
      this.handleSearch();
    },

    // 添加明细行
    addDetailRow() {

      const newDetail = {
        statisticsDate: new Date().toISOString().split("T")[0],
        currentLeakCount: 0,
        repairedCount: 0,
        lastRainRepairCount: 0,
        rescueCount: 0,
        rescueVehicleCount: 0,
        rescuePersonCount: 0,
        repairSituation: "",
        districtId: localStorage.getItem("userDID"),
        districtName: localStorage.getItem("userDname")
      };

      this.formData.detailList.push(newDetail);
    },

    // 删除明细行
    removeDetailRow(index) {
      if (this.formData.detailList.length <= 1) {
        alert("至少保留一行明细数据");
        return;
      }
      this.formData.detailList.splice(index, 1);
    },

    // 计算明细合计
    getDetailTotal(field) {
      if (!this.formData.detailList || this.formData.detailList.length === 0)
        return 0;
      return this.formData.detailList.reduce((sum, item) => {
        return sum + (Number(item[field]) || 0);
      }, 0);
    },

    // 计算表格显示的合计（用于主列表）
    getTableTotal(row, field) {
      if (!row.detailList || row.detailList.length === 0) return 0;
      return row.detailList.reduce((sum, item) => {
        return sum + (Number(item[field]) || 0);
      }, 0);
    },

    // 获取表格抢修情况（显示明细数量）
    getTableRepairSituation(row) {
      if (!row.detailList || row.detailList.length === 0) return "暂无明细";
      return `共${row.detailList.length}条明细`;
    },

    // 计算详情页明细合计
    getDetailDisplayTotal(field) {
      if (
        !this.detailData.detailList ||
        this.detailData.detailList.length === 0
      )
        return 0;
      return this.detailData.detailList.reduce((sum, item) => {
        return sum + (Number(item[field]) || 0);
      }, 0);
    },
  },
};
</script>

<style scoped>
.quxunqiloufang-container {
  display: flex;
  height: 100%;
  box-sizing: border-box;
  padding-top: 10px;
}

.left-panel {
  width: 240px;
}

.year-panel {
  background: #fff;

  border: 1px solid #e4e7ed;
  padding: 0;
  overflow: hidden;
}

.panel-title {
  margin: 0;
  padding: 16px 20px;
  background: #f5f7fa;
  border-bottom: 1px solid #e4e7ed;
  font-size: 16px;
  font-weight: 500;
  color: #303133;
}

.year-list {
  padding: 0;
}

.year-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px;
  cursor: pointer;
  border-bottom: 1px solid #f0f0f0;
  transition: all 0.2s;
}

.year-item:last-child {
  border-bottom: none;
}

.year-item:hover {
  background-color: #f5f7fa;
}

.year-item.active {
  background-color: #ecf5ff;
  color: #409eff;
}

.year-text {
  font-size: 14px;
  font-weight: 500;
}

.year-count {
  font-size: 12px;
  color: #909399;
  background: #f0f0f0;
  padding: 2px 8px;
  border-radius: 10px;
}

.year-item.active .year-count {
  background: #409eff;
  color: #fff;
}

/* 右侧面板样式 */
.right-panel {
  flex: 1;
  min-width: 0;
  background: #fff;
  margin-left: 5px;
  box-sizing: border-box;
  padding: 0.2667rem;
}

/* 页面内容区域 */
.page-content {
  background: #fff;
}

/* 头部查询区域 */
.header-section {
  margin-bottom: 20px;
}

.form-row {
  display: flex;
  align-items: center;
  gap: 50px;
  margin-bottom: 15px;
}

.form-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.form-item label {
  font-weight: normal;
  color: #333;
  white-space: nowrap;
  font-size: 14px;
}

.input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.form-item input {
  padding: 6px 30px 6px 10px;
  border: 1px solid #ccc;
  border-radius: 3px;
  width: 200px;
  font-size: 14px;
}

.search-icon {
  position: absolute;
  right: 8px;
  color: #666;
  font-size: 14px;
  pointer-events: none;
}

.required {
  color: #f56c6c;
  margin-left: 5px;
  font-weight: bold;
}

/* 只读文本样式 */
.readonly-text {
  color: #666;
  font-size: 14px;
  background: #f5f5f5;
  padding: 6px 10px;
  border-radius: 3px;
  border: 1px solid #e8e8e8;
  display: inline-block;
  min-width: 150px;
}

/* 操作区域 */
.operation-section {
  margin-bottom: 20px;
}

.add-btn {
  background: #1890ff;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.add-btn:hover {
  background: #40a9ff;
}

/* 表格区域 */
.table-section {
  border: 1px solid #d9d9d9;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  background: #fff;
}

.data-table th,
.data-table td {
  border: 1px solid #d9d9d9;
  padding: 8px 6px;
  text-align: center;
  vertical-align: middle;
  line-height: 1.4;
}

.data-table th {
  background: #fafafa;
  font-weight: 500;
  color: #333;
  font-size: 13px;
}

.center-cell {
  text-align: center;
}

.data-table tbody tr:nth-child(even) {
  background: #fafafa;
}

.data-table tbody tr:hover {
  background: #e6f7ff;
}

.total-row {
  background: #f0f0f0 !important;
  font-weight: 500;
}

.total-row:hover {
  background: #f0f0f0 !important;
}

.no-data {
  color: #999;
  font-style: italic;
  padding: 20px;
}

.operation-column {
  white-space: nowrap;
  padding: 4px;
}

.operation-btn {
  padding: 2px 6px;
  margin: 0 1px;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  font-size: 12px;
}

.view-btn {
  background: #52c41a;
  color: white;
}

.view-btn:hover {
  background: #73d13d;
}

.edit-btn {
  background: #fa8c16;
  color: white;
}

.edit-btn:hover {
  background: #ffa940;
}

.delete-btn {
  background: #ff4d4f;
  color: white;
}

.delete-btn:hover {
  background: #ff7875;
}

/* 弹窗样式 */
.dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.dialog-content {
  background: white;
  border-radius: 6px;
  width: 90%;
  max-width: 800px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  border-bottom: 1px solid #e8e8e8;
}

.dialog-header h3 {
  margin: 0;
  color: #333;
  font-size: 16px;
  font-weight: 500;
}

.close-btn {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: #999;
  padding: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.close-btn:hover {
  color: #666;
}

.dialog-body {
  padding: 24px;
}

.form-section {
  max-width: 100%;
}

.form-title {
  text-align: center;
  font-size: 16px;
  font-weight: 500;
  color: #333;
  margin-bottom: 24px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e8e8e8;
}

.form-header-info {
  background: #fafafa;
  padding: 16px;
  border-radius: 4px;
  margin-bottom: 20px;
}

.form-group {
  margin-bottom: 20px;
  padding: 16px;
  background: #fafafa;
  border-radius: 4px;
  border-left: 3px solid #1890ff;
}

.form-group h4 {
  margin: 0 0 16px 0;
  color: #333;
  font-size: 15px;
  font-weight: 500;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px 24px;
  border-top: 1px solid #e8e8e8;
  background: #fafafa;
}

.cancel-btn {
  background: #fff;
  color: #666;
  border: 1px solid #d9d9d9;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.cancel-btn:hover {
  background: #f5f5f5;
  border-color: #40a9ff;
}

.save-btn {
  background: #1890ff;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.save-btn:hover {
  background: #40a9ff;
}

/* 详情弹窗样式 */
.detail-section {
  padding: 0;
}

.detail-item {
  display: flex;
  margin-bottom: 12px;
  align-items: flex-start;
}

.detail-item.full-width {
  flex-direction: column;
}

.detail-item label {
  font-weight: 500;
  color: #333;
  min-width: 120px;
  margin-right: 12px;
  font-size: 14px;
}

.detail-item span,
.detail-item p {
  color: #666;
  flex: 1;
  margin: 0;
  line-height: 1.5;
  font-size: 14px;
}

.detail-group {
  margin-bottom: 20px;
  padding: 16px;
  background: #fafafa;
  border-radius: 4px;
  border-left: 3px solid #52c41a;
}

.detail-group h4 {
  margin: 0 0 12px 0;
  color: #333;
  font-size: 15px;
  font-weight: 500;
}

.detail-row {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.detail-row .detail-item {
  min-width: 200px;
  margin-bottom: 8px;
}

/* 明细表格样式 */
.detail-dialog {
  max-width: 1200px;
  width: 95%;
}

.detail-table-section {
  margin-top: 20px;
}

.detail-table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  padding: 10px 0;
  border-bottom: 1px solid #e8e8e8;
}

.detail-table-title {
  font-size: 16px;
  font-weight: 500;
  color: #333;
}

.add-detail-btn {
  background: #1890ff;
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
}

.add-detail-btn:hover {
  background: #40a9ff;
}

.detail-table-wrapper {
  max-height: 400px;
  overflow-y: auto;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
}

.detail-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  background: #fff;
}

.detail-table th,
.detail-table td {
  border: 1px solid #d9d9d9;
  padding: 6px 4px;
  text-align: center;
  vertical-align: middle;
  line-height: 1.4;
}

.detail-table th {
  background: #fafafa;
  font-weight: 500;
  color: #333;
  font-size: 12px;
  position: sticky;
  top: 0;
  z-index: 1;
}

.table-input,
.table-input-number {
  width: 100%;
  border: none;
  padding: 4px 4px;
  text-align: center;
  font-size: 12px;
  background: transparent;
  box-sizing: border-box;
  max-width: calc(100% - 2px);
}

.table-input:focus,
.table-input-number:focus {
  outline: 1px solid #1890ff;
  background: #f0f8ff;
}

.table-input-number {
  text-align: center;
}

.remove-btn {
  background: #ff4d4f;
  color: white;
  border: none;
  padding: 2px 6px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 11px;
}

.remove-btn:hover {
  background: #ff7875;
}

.total-row {
  background: #f0f0f0 !important;
  font-weight: 500;
}

.total-row td {
  background: #f0f0f0 !important;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .quxunqiloufang-container {
    padding: 15px;
  }

  .form-row {
    flex-direction: column;
    gap: 20px;
    align-items: flex-start;
  }

  .form-item input {
    width: 100%;
  }

  .dialog-content {
    width: 95%;
    margin: 10px;
  }

  .detail-dialog {
    max-width: 100%;
    width: 98%;
  }

  .detail-table-wrapper {
    max-height: 300px;
  }

  .detail-table {
    font-size: 11px;
  }

  .detail-table th,
  .detail-table td {
    padding: 4px 2px;
  }

  .data-table {
    font-size: 12px;
  }

  .data-table th,
  .data-table td {
    padding: 6px 4px;
  }

  .operation-btn {
    padding: 1px 4px;
    margin: 0;
    font-size: 11px;
  }
}

/* 复选框样式 */
input[type="checkbox"] {
  cursor: pointer;
}
</style>
